<template>
	<view>
		<VideoBox>
			<template #content>
				<view class="outBox">
					<u-navbar leftText="拼卡" leftIconColor="#fff" :autoBack="false" @leftClick="leftClick"
						bgColor="rgba(0, 0, 0, 0.6)">
						<view class="left-slot" slot="left">
							<u-icon name="arrow-left" color="#fff"></u-icon>
							<text>{{ '拼卡' }}</text>
						</view>
					</u-navbar>
					<view class="content">
						<view class="pic2">
							<image :src="getImgUrl('cardCombination/pic7.png')" mode=""></image>
						</view>
						<view class="numberBtn">
							台号{{dataObj.counterNo || ''}}
						</view>
						<view class="check" @click="handleSelect">
							信息查询
						</view>
						<view class="share">
							<button open-type="share">一键分享</button>
							<image @click="handleShare" class="wenhao" style="width: 32rpx;"
								src="/static/reservation/img2.png" mode="widthFix" />
						</view>
						<scroll-view class="usersBox" :scroll-y="true">
							<div class="users">
								<view class="user" v-for="item in participants" :style="{
								  backgroundImage: `url(${item.avatar})`,
								}" @click="handleUser(item)">
									<view class="text">
										<view class="base">
											<view class="name">{{ item.customerName }}</view>
											<view class="sex" v-if="!item.isCreateUser">
												<image v-if="item.sex == 0"
													:src="`${getImgUrl('/mine/cardCombination/img2.png')}`"
													mode="widthFix" />
												<image v-else :src="`${getImgUrl('/mine/cardCombination/img3.png')}`"
													mode="widthFix" />
											</view>
										</view>
										<view class="footer">
											<view class="state" v-if="item.isCreateUser">
												<text>发起人</text>
											</view>
											<view class="sex" v-if="item.isCreateUser">
												<image v-if="item.sex == 0"
													:src="`${getImgUrl('/mine/cardCombination/img2.png')}`"
													mode="widthFix" />
												<image v-else :src="`${getImgUrl('/mine/cardCombination/img3.png')}`"
													mode="widthFix" />
											</view>
										</view>
									</view>
								</view>

							</div>
						</scroll-view>

						<view class="login-container" v-if="!dataObj.isPinkaLeader" :style="{
              backgroundImage: `url(${getImgUrl('/mine/cardCombination/img4.png')})`,
								  backgroundSize:'100% 100%'
								}">
							<view class="login-top">
								<image :src="userInfo.avatar" mode="scaleToFill"></image>
								<!--					<u-avatar :src="baseImgUrl +'/logo.jpg'"></u-avatar>-->
								<view class="name">
									{{ userInfo.nickName }}
									<view class="state" v-if="dataObj.auditStatus == 2">
										<text>已拒绝</text>
									</view>
									<view class="state" v-if="dataObj.auditStatus == 3">
										<text>已踢出</text>
									</view>
								</view>
							</view>
							<view class="btns">
								<view class="btnOut btnOut2"
									v-if="(dataObj.auditStatus == null && dataObj.paymentStatus == null) || dataObj.auditStatus == 2 || dataObj.auditStatus == 3 || dataObj.paymentStatus == 2">
									<view class="btn" @click="handleJoin">
										<text>门票价申请</text>
									</view>
								</view>
								<view class="btnOut btnOut3"
									v-if="(dataObj.auditStatus == null && dataObj.paymentStatus == null) || dataObj.auditStatus == 2 || dataObj.auditStatus == 3 || dataObj.paymentStatus == 2">
									<view class="btn" @click="handleJoin2">
										<text>自定义申请</text>
									</view>
								</view>
								<div class="btnOut" v-if="dataObj.auditStatus == 0 && dataObj.paymentStatus == 0">
									<view class="btn">
										<text>待审核</text>
									</view>
								</div>
								<!-- <div class="btnOut" v-if="dataObj.auditStatus == 2 && dataObj.paymentStatus == 0"
									@click="handleJoin3">
									<view class="btn">
										<text>已拒绝</text>
									</view>
								</div> -->
								<div class="btnOut btnOut3"
									v-if="dataObj.auditStatus == 1 && (dataObj.paymentStatus == 0)">
									<view class="btn" @click="handlePay">
										<text>点击支付</text>
									</view>
								</div>
								<div class="btnOut btnOut2"
									v-if="dataObj.auditStatus == 1 && dataObj.paymentStatus == 1 && dataObj.isEnter != 2">
									<view class="btn" @click="showCode">
										<text>出示二维码</text>
									</view>
								</div>
								<div class="btnOut" v-if="dataObj.isEnter == 2">
									<view class="btn">
										<text>已离场</text>
									</view>
								</div>
							</view>
						</view>
					</view>
				</view>
				<view class="changeColor">
					<diaBox ref="diaBoxRef" :show-btns="false" :isClose="true">
						<template v-slot:dia-cont>
							<view class="diaCont">
								<view class="pic pic4">
									<image :src="getImgUrl('cardCombination/pic11.png')" mode=""></image>
								</view>
								<view class="bgCont">
									<view class="title">
										<view class="name">
											{{userInfo.nickName}}
											<image
												:src="getImgUrlLocal(userInfo.sex == '男' ? '/mine/cardCombination/man.png' : '/mine/cardCombination/woman.png')"
												mode=""></image>
										</view>
										<view class="time">
											{{time}}
										</view>
									</view>
									<div class="imgBoxOut">
										<view class="canvas">
											<!-- 二维码插件 width height设置宽高 -->
											<canvas canvas-id="qrcode"
												:style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
										</view>
									</div>
									<!-- 	<view class="btns">
										<view class="btnOut btnOut2">
											<view class="btn" @click="closeDia">
												关闭
											</view>
										</view>
									</view> -->

								</view>
							</view>
						</template>
					</diaBox>

					<diaBox ref="wxQrCodeRef" :show-btns="false" :isClose="true">
						<template v-slot:dia-cont>
							<view class="diaCont">
								<view class="pic pic3">
									<image :src="getImgUrl('cardCombination/pic12.png')" mode=""></image>
								</view>
								<view class="bgCont">
									<view class="wxCont">
										<p>
											<image :src="getImgUrlLocal('/mine/cardCombination/jinggao.png')"
												mode="widthFix">
											</image>
											添加队长微信，进行审核。队长不会向您索要任何个人隐私信息，如:身份证号、生日、密码等。谨防诈骗！
										</p>
									</view>
									<div class="imgBoxOut">
										<view class="imageBox">
											<image :src="wxQrCode" mode="widthFix" :show-menu-by-longpress="true">
											</image>
										</view>
									</div>
								</view>
							</view>
						</template>
					</diaBox>

					<diaBox ref="showDiaRef6" :show-btns="false" :isClose="true" @comfireFunc="closeDia6">
						<template v-slot:dia-cont>
							<view class="pic">
								<image :src="getImgUrl('cardCombination/pic8.png')" mode=""></image>
							</view>
							<view class="bgCont">
								<div class="user-info">
									<div class="tag">
										台号
									</div>
									<span class="username">{{diaData.counterNo}}</span>
								</div>
								<view class="text-box">
									<div class="row row1">
										<div class="info-row">
											<label>发起人：</label><span
												class="status pending">{{diaData.createUser}}</span>
										</div>
										<div class="info-row">
											<label>申请：</label><span class="status pending">{{diaData.applyNum}}人</span>
										</div>
									</div>
									<div class="row row1">
										<div class="info-row">
											<label>审核通过：</label><span class="status pending">{{diaData.passNum}}人</span>
										</div>
										<div class="info-row">
											<label>已支付(未核销)：</label><span
												class="status pending">{{diaData.payNum}}人</span>
										</div>
									</div>
									<div class="row row1">
										<div class="info-row">
											<label>已到店核销：</label><span
												class="status pending">{{diaData.verifyNum}}人</span>
										</div>
										<div class="info-row">
											<label>已离店：</label><span class="status pending">{{diaData.leaveNum}}人</span>
										</div>
									</div>
									</div>
								</view>
								<div class="row row2">
									<div class="info-row" v-if="diaData.isCreator">
										<label>当前门票总额：</label><span class="status pending">{{diaData.totalTicketPrice}}
											元</span>
									</div>
									<div class="info-row" v-else>
										<label>我的门票金额：</label><span
											class="status pending">{{diaData.payTicketPrice || 0}}
											元</span>
									</div>
								</div>

							</view>
						</template>
					</diaBox>

				</view>
				<diaBox ref="showDiaRef" title="自定义申请" :show-btns="false" :isClose="true">
					<template v-slot:dia-cont>
						<view class="diaCont diaCont12">
							<div class="icon" @click="delPrice">
								<image :src="getImgUrl('/mine/cardCombination/del.png')" mode=""></image>
							</div>
							<view class="inputBox">
								<u--input border="surround" color="#fff" style="text-align: center;"
									v-model="price"></u--input>
							</view>
							<div class="icon" @click="addPrice">
								<image :src="getImgUrl('/mine/cardCombination/add.png')" mode=""></image>
							</div>
						</view>
						<view class="btns">
							<view class="btnOut btnOut2">
								<view class="btn" @click="comfireFunc">
									确认
								</view>
							</view>
						</view>
					</template>
				</diaBox>
				<diaBox ref="showDiaRef5" title="再次申请" content="再次申请后,请及时联系队长" :show-btns="true" :isClose="true"
					@comfireFunc="handleJoin()"></diaBox>
				<diaBox ref="showDiaRef7" title="分享说明" :isClose="true">
					<template v-slot:dia-cont>
						<view class="shareText">成功分享拼卡，产生收益，收益为成功分享门票总金额的30%。</view>
						<view class="shareText">（成功分享拼卡是指：通过一键分享功能，购买并核销门票，退出无效；如新注册用户，成功注册后，需再次点击分享链接）</view>
					</template>
				</diaBox>
				<diaBox ref="showDiaRef8" title="入场说明" :showBtns="true" :showCancel="false"
					@comfireFunc="comfireShowCode">
					<template v-slot:dia-cont>
						<view class="shareText2">注意：核验入场后不退票</view>
					</template>
				</diaBox>
				<!-- 拼卡详情 -->
				<DiaBox ref="showDiaRef9" @comfireFunc="closeInfoMation" title="拼卡说明" :isClose="false"
					:show-cancel="false" :showBtns="true">
					<template slot="dia-cont">
						<view class="shareText3">
							<p>亲爱的FOMOxyz拼卡玩家：</p>
							<p class="intent"><text class="color">《官方拼卡》</text> 只在小程序上收取 <text class="color">《门票费用》</text>，门票以外的其他<text class="color">《私人转账》</text>，门店<text class="color">《概不负责》</text>，谨防诈骗。</p>
							<p class="intent">队长不会向您私下收取费用，如有<text class="color">《私下收取费用》</text>，可向官方客服《匿名举报》， <br>门店<text
									class="color">《奖励500-5000￥》</text>不等。</p>
							<p class="intent">任何未尽事宜，请咨询客服，祝您游玩愉快。</p>
						</view>
					</template>
				</DiaBox>
			</template>
		</VideoBox>
		<!-- <web-view class="payView" v-if="showPay" :src="payUrl"></web-view> -->
	</view>
</template>

<script>
	import VideoBox from "@/components/VideoBox/index.vue";
	import {
		getImgUrl,
		getImgUrlLocal,
		getWXStatusHeight,
		getDateForYmd
	} from "@/utils";
	import {
		getOrderParticipateShareCounterApi,
		findShareParticipateByIdApi,
		joinShareApi,
		payJoinShareApi,
		getWxQrCodeApi,
		payJoinShare2Api,
		getPinKaDetailApi,
		sendWaitPayMessageApi,
		getPinKaDetail2Api,
		getCurrentUserInfoApi,
		acceptShareApi
	} from "@/api/api";

	import uQRCode from '@/uni_modules/cc-defineQRCode/components/cc-defineQRCode/common/uqrcode.js'
	import diaBox from "@/components/diaBox/index.vue"

	export default {
		components: {
			VideoBox,
			diaBox
		},
		onLoad(e) {
			let obj = getWXStatusHeight()
			this.menuHeight = obj.menuHeight

			this.userInfo = uni.getStorageSync('userInfo')
			if (e.id) {
				this.id = e.id
				this.getDetails()
			}

			console.log(e, "eeee");

			const options = this.$mp.query
			if (options.shareUserId) {
				this.shareUserId = options.shareUserId
				console.log("分享用户id：", this.shareUserId);
				this.acceptShare()
			}

			this.startTime()

			this.timer2 = setInterval(() => {
				this.startTime()
			}, 1000)

			// 获取当前页面栈
			const pages = getCurrentPages();
			// 页面栈长度为1，说明是从分享进入
			this.isShareEnter = pages.length === 1;
			this.showInfoMationDia()
		},
		onUnload() {
			clearInterval(this.time2)
		},
		async onShareAppMessage() {
			// 获取当前用户信息
			const res = await getCurrentUserInfoApi()
			const curUserId = res.data.id
			return {
				title: this.userInfo.nickName + '分享了FOMOxyz的' + this.dataObj.counterNo + ' 拼卡',
				path: `/pages/mine/cardCombination/details?shareUserId=${curUserId}&id=` + this.id, // 携带用户ID作为参数
				success: (res) => {
					console.log('分享成功', res)
				},
				fail: (res) => {
					console.log('分享失败', res)
				}
			}
		},
		data() {
			return {
				qrcodeSize: 136,
				menuHeight: 0,
				videoUrl: this.$videoUrl,
				id: null,
				userInfo: {},
				dataObj: {},
				payUrl: "", // 支付地址
				showPay: false, // 显示支付
				isShareEnter: false,
				qrcodeText: 'eoruw20230528',
				wxQrCode: '',
				price: 1, // 优先支付价格
				participants: [], // 参与人列表
				fiveSeconds: 5,
				timer: '',
				timer2: '',
				timer3: '',
				isCanShowCode: false,
				baseUrl: '',
				diaData: {},
				shareAuditStatus: '',
				time: '',
				shareUserId: '', // 分享用户id
				curUserId: '', // 当前用户id
				isFirstPinKa: {
					flag: '是',
					date: ''
				},
			}
		},
		methods: {
			getImgUrl,
			getImgUrlLocal,
			// 显示申明弹窗
			showInfoMationDia() {
				const isFirstPinKa = uni.getStorageSync('isFirstPinKa')
				// 判断日期是否是今天
				if (isFirstPinKa.flag == '否' && isFirstPinKa.date == getDateForYmd()) this.isFirstPinKa.flag = '否'
				else {
					this.$refs.showDiaRef9.show = true
					// 记录当前时间
					this.timer = Date.now()
					this.isFirstPinKa.flag = '是'
					const date = getDateForYmd()
					console.log(date, "date")
					this.isFirstPinKa.date = date
					uni.setStorageSync('isFirstPinKa', this.isFirstPinKa)
				}
			},
			closeInfoMation() {
				if (this.isFirstPinKa.flag == '是') {
					// 判断时间是否过去5秒
					if (Date.now() - this.timer < 5000) {
						this.$refs.showDiaRef9.show = true
						uni.$u.toast('阅读5秒可关闭')
					} else {
						const date = getDateForYmd()
						this.isFirstPinKa.flag = '否'
						this.isFirstPinKa.date = date
						this.$refs.showDiaRef9.show = false
						uni.setStorageSync('isFirstPinKa', this.isFirstPinKa)
					}
				} else {
					this.$refs.showDiaRef9.show = false
				}
			},
			handleShare() {
				this.$refs.showDiaRef7.show = true
			},
			async acceptShare() {
				const data = {
					applyUserId: this.shareUserId,
					pinkaId: this.id
				}
				const res = await acceptShareApi(data)
			},
			leftClick() {
				if (this.isShareEnter) {
					// 从分享进入，直接跳转到首页
					uni.reLaunch({
						url: '/pages/mine/cardCombination/index'
					});
				} else {
					// 正常返回上一页
					uni.navigateBack();
				}
			},
			closeDia6() {
				this.$refs.showDiaRef6.show = false
			},
			startTime() {
				const now = new Date();

				// 获取时间组件
				let hours = now.getHours();
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				const months = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];

				const year = now.getFullYear();
				const month = months[now.getMonth()];
				const date = now.getDate();

				const time = `${year}年${month}月${date}日 ${hours}:${minutes}:${seconds}`
				this.time = time
			},
			async handleSelect() {
				const res = await getPinKaDetail2Api(this.id)
				if (res.code == 200) {
					this.$refs.showDiaRef6.show = true
					this.diaData = res.data
				}
			},
			delPrice() {
				if (this.price <= 1) {
					this.price = 1
				} else {
					this.price -= 1
				}
			},
			addPrice() {
				this.price -= 0
				this.price += 1
			},
			comfireFunc3() {
				this.$refs.showDiaRef6.show = false
			},
			handleInfo() {
				this.$refs.showDiaRef6.show = true
			},
			getShareParticipateStatus(item) {
				if (item.auditStatus == null) {
					return '未发起'
				} else if (item.isDone == 1) {
					return '已结束'
				} else if (item.isEnter == 1) {
					return '已进场'
				} else if (item.isEnter == 2) {
					return '已离场'
				} else if (item.paymentStatus == 1) {
					return '已付款'
				} else if (item.auditStatus == 0) {
					return '已申请'
				} else if (item.auditStatus == 1) {
					return '已通过'
				} else if (item.auditStatus == 2) {
					return '已拒绝'
				} else if (item.auditStatus == 3) {
					return '已踢出'
				}
			},
			closeDiaQrCodeRef() {
				this.$refs.wxQrCodeRef.show = false
			},
			// 点击用户
			handleUser(item) {
				if (item.isCreateUser && item.userId != this.dataObj.userId) {
					this.showQrCode()
				}
			},
			closeDia() {
				this.$refs.diaBoxRef.show = false
			},
			make() {
				uni.showLoading({
					title: '二维码生成中',
					mask: true
				})

				uQRCode.make({
					canvasId: 'qrcode',
					text: this.dataObj.id,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
						console.log('qrcodeSrc = ' + this.qrcodeSrc);
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			showCode() {
				// 查看是否已阅读
				const checkRead = uni.getStorageSync('checkRead')
				console.log(checkRead, "checkRead");
				if (checkRead == true) {
					this.$refs.diaBoxRef.show = true
					this.make()
				} else {
					this.$refs.showDiaRef8.show = true
					// 开启定时器
					setTimeout(() => {
						this.isCanShowCode = true
					}, 5000)
				}
			},
			// 继续显示code
			comfireShowCode() {
				if (this.isCanShowCode == true) {
					this.$refs.diaBoxRef.show = true
					this.make()
					this.$refs.showDiaRef8.show = false
					uni.setStorageSync('checkRead', true)
				} else {
					uni.showToast({
						title: '请先阅读5s'
					})
				}
			},
			async handlePay() {
				if (this.payLoading) return
				this.payLoading = true
				const res = await payJoinShareApi(this.dataObj.id)
				const _this = this
				if (res.code == 200) {
					wx.requestPayment({
						...res.data.jspackage,
						success(res) {
							if (res.errMsg == "requestPayment:ok") {
								uni.$u.toast("支付成功")
								_this.getDetails()
							}
						},
						fail(err) {
							console.log(err, "err");
							uni.$u.toast("支付失败")
						}
					})
				}
				// 防止支付失败，3秒后可以支付
				setTimeout(() => {
					this.payLoading = false
				}, 3000)
			},
			// 查看详情
			async getDetails() {
				const res = await findShareParticipateByIdApi(this.id)
				if (res.code == 200) {
					this.participants = res.data
				}

				const res1 = await getPinKaDetailApi(this.id)
				if (res1.code == 200) {
					this.dataObj = res1.data
				}
			},
			async handleJoin() {
				const _this = this
				if (uni.getStorageSync('JZMTQdGPtpkdU7xkwKZar48ZOVkowJsarxTA533U720')) {
					this.doJoinShare()
				} else {
					uni.requestSubscribeMessage({
						tmplIds: ['JZMTQdGPtpkdU7xkwKZar48ZOVkowJsarxTA533U720'],
						success(res) {
							console.log(res);
							if (res['JZMTQdGPtpkdU7xkwKZar48ZOVkowJsarxTA533U720'] == "accept") {
								uni.setStorageSync('JZMTQdGPtpkdU7xkwKZar48ZOVkowJsarxTA533U720', true)
							}
							_this.doJoinShare()
						},

					})
				}
			},
			async doJoinShare() {
				const data = {
					shareStatusId: this.id,
					shareUserId: this.shareUserId
				}
				const res = await joinShareApi(data)

				if (res.code == 200) {
					uni.$u.toast('已申请加入')
					this.$refs.showDiaRef5.show = false
					this.showQrCode()
					await this.getDetails()
				}
			},
			async handleJoin3() {
				this.$refs.showDiaRef5.show = true
			},
			async handleJoin2() {
				this.$refs.showDiaRef.show = true
			},
			async comfireFunc() {
				if (this.price === '') {
					return uni.$u.toast("请输入自定义申请价格")
				}
				const data = {
					shareId: this.id,
					prioritySharePrice: this.price,
					shareUserId: this.shareUserId
				}
				const res = await payJoinShare2Api(data)

				if (res.code == 200) {
					this.$refs.showDiaRef.show = false
					uni.$u.toast('已申请加入')
					this.showQrCode()
					await this.getDetails()
				}
			},
			// 显示 拼卡人微信二维码
			async showQrCode() {
				this.$refs.wxQrCodeRef.show = true
				this.showWxCodeImg()
				// this.countdownTimer()
			},
			countdownTimer() {
				console.log(`倒计时开始: ${this.fiveSeconds}秒`);
				clearInterval(this.timer);
				this.fiveSeconds = 5
				this.timer = setInterval(() => {
					this.fiveSeconds = this.fiveSeconds - 1
					console.log(`剩余时间: ${this.fiveSeconds}秒`);

					if (this.fiveSeconds === 0) {
						clearInterval(this.timer);
						console.log('时间到！');
					}
				}, 1000);
			},
			async showWxCodeImg() {
				const res = await getWxQrCodeApi({
					id: this.id
				})
				if (res.code == 200) {
					this.wxQrCode = res.msg
					const url = this.$baseUrl.substring(0, this.$baseUrl.length - 1)
					this.baseUrl = url
					// uni.previewImage({
					// 	urls: [url + this.wxQrCode]
					// });
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.shareText {
		margin-top: 20rpx;
		text-indent: 20rpx;
		color: #fff;
	}

	.shareText2 {
		margin-top: 20rpx;
		text-indent: 20rpx;
		color: #fff;
		text-align: center;
	}

	.share {
		margin-top: 84rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: relative;
		z-index: 999;
		margin-right: 40rpx;

		button {
			background-color: rgba(0, 0, 0, 0);
			color: #fff;
			text-align: right;
			font-size: 26rpx;
			border: none;
			margin: 0;

			&::after {
				border: none !important;
			}
		}
	}

	.pic {
		position: absolute;
		width: 100%;
		height: 780rpx;
		top: -300rpx;
		left: -41rpx;

		image {
			position: relative;
			width: 114%;
			z-index: -1;
			height: 780rpx;
		}
	}

	.changeColor {
		::v-deep .diaBox {
			width: 85vw !important;
			backdrop-filter: none !important;
			border: none !important;
			background: rgba(0, 0, 0, 0) !important;
			background-size: 100% 100%;
			padding: 0 !important;
			position: relative;
		}
	}

	.bgCont {
		position: relative;
		background: rgba(0, 0, 0, 0);
		// border-radius: 60rpx;
		// border: 4rpx solid #4c575b;
		// backdrop-filter: blur(50px);
		padding: 50rpx;
	}

	.info-row {
		font-size: 28rpx;
		color: #c7cad0;

		.status {
			color: #fff !important;
		}
	}

	.title {
		color: #fff;
		text-align: center;

		.name {
			margin-bottom: 10rpx;
			margin-top: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
			}
		}
	}

	.text-box {
		padding: 20rpx 0;
		border-top: 2rpx solid #4b585d;
		border-bottom: 2rpx solid #4b585d;
		margin-top: 20rpx;
		color: #fff;
	}

	.row2 {
		margin-top: 20rpx;
	}

	/* 信息行通用样式 */
	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff
	}

	.row1 {
		margin-bottom: 20rpx;
	}

	/* 用户信息行 */
	.user-info {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #fff;

		image {
			width: 30rpx;
		}

		.tag {
			width: 76rpx;
			height: 40rpx;
			background: #0FC6C2;
			border-radius: 14rpx;
			font-size: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.diaCont12 {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		justify-content: center;

		.inputBox {
			width: 348rpx;
			height: 92rpx;
			background: rgba(15, 15, 15, 0.41);
			border-radius: 46rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 20rpx;

			::v-deep .u-input {
				background-color: transparent !important;
				text-align: center !important;
			}

			::v-deep .u-input__content__field-wrapper__field {
				text-align: center !important;
			}

			// border: 2rpx solid;
			// border-image: linear-gradient(164deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16)) 2 2;
			// backdrop-filter: blur(7px);
		}

	}

	.diaCont {
		position: relative;

		.time {
			height: 118rpx;
			background: linear-gradient(to right, #636568 0%, #363e41 100%);
			border-radius: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.icon {
			display: flex;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.infoText {
		color: #fff;
		font-weight: bold;
		font-size: 34rpx;
	}

	.infoBtn {
		.btn {
			display: flex;
			justify-content: center !important;
			align-items: center;
		}
	}

	.imgBoxOut {
		padding: 25rpx;
		background: #000;
		border-radius: 30rpx;
		margin: 20rpx auto 0;
		width: fit-content;
	}

	.imageBox {
		width: 337rpx;
		height: 305rpx;
		position: relative;
		overflow: hidden;



		image {
			position: absolute;
			width: 380rpx;
			top: -122rpx;
			left: -25rpx;
		}
	}

	.topBox {
		margin-top: 0 !important;
		margin-bottom: 30px;

		.btn {
			padding: 0 50rpx;
			display: flex;
			justify-content: space-between;
		}

	}

	.priceBox {
		margin-bottom: 30rpx;
		color: #fff;
		text-align: center;
	}

	.shareText2 {
		text-align: center;
	}

	.shareText3 {
		margin-top: 20rpx;
		font-size: 28rpx;
		line-height: 38rpx;
		color: #fff;

		.intent {
			text-indent: 20rpx;
			margin-top: 10rpx;
		}

		.color {
			color: #0FC6C2;
		}
	}

	.diaCont {
		.cont {
			margin-top: 20rpx;
			color: #fff;

		}

		.wxCont {
			margin-top: 20rpx;
			// color: #FF9A2E;
			font-size: 26rpx;
			background: rgba(255, 96, 72, 0.25);
			border-radius: 18rpx;
			backdrop-filter: blur(14px);
			font-weight: 500;
			font-size: 24rpx;
			color: #FF6048;
			padding: 15rpx;

			image {
				width: 25rpx;
				margin-right: 10rpx;
			}
		}
	}

	.inputBox {
		border-bottom: 2rpx solid #B3B4C3;
	}

	.imgBox {
		text-align: center;
		margin-top: 20rpx;

		image {
			width: 500rpx;
		}
	}

	.canvas {
		display: flex;
		justify-content: center;
	}

	.payView {
		height: 100vh;
		width: 100vw;
		position: fixed;
		z-index: 9999999;
	}

	.btns {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;

		.btnOut {
			flex: 1;
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(195, 200, 203, 0.25);
			margin-right: 50rpx;
			height: 90rpx;

			&:last-child {
				margin-right: 0;
			}

			.btn {
				background-color: #B3B4C3;
			}
		}

		.btnOut2 {
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);

			.btn {
				background: #2cb3af;
			}
		}

		.btnOut3 {
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(249, 118, 9, 0.25);

			.btn {
				background: #f97609;
			}
		}

		.btn {
			width: 100%;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
			border-radius: 64rpx;
			box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
		}
	}

	.login-container {
		width: 100%;
		height: 466rpx;
		padding: 20rpx 30rpx;
		border-radius: 12rpx 12rpx 0 0;
		background-size: 100% 100%;
		position: fixed;
		bottom: 0;
		left: 0;

		.login-top {
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 71rpx;
				margin-bottom: 32rpx;
			}
		}

		.name {
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
			text-align: center;
			display: flex;
			align-items: center;

			.state {
				width: 100rpx;
				height: 45rpx;
				border-radius: 14rpx;
				background: #f83500;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #fff;
					display: flex;
				}
			}
		}

		button {
			margin-bottom: 10rpx;
			height: 90rpx;
			background: linear-gradient(267deg, #CC34B3 0%, #541A66 100%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
		}

		/deep/ .u-icon__icon {
			top: -7rpx !important;
		}

		/deep/ .u-iconfont {
			top: -7rpx !important;
		}

		.noBtn {
			margin-left: 30rpx;
		}
	}

	.content {
		padding: 32rpx;
		position: relative;

		.pic2 {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;

			image {
				width: 100%;
				height: 68vh;
			}
		}

		.pic4 {
			top: -200rpx;

			image {
				height: 820rpx !important;
			}
		}

		.pic3 {
			top: -200rpx;

			image {
				height: 800rpx;
			}
		}

		.numberBtn {
			position: absolute;
			top: 90rpx;
			left: 90rpx;
			z-index: 99;
			font-weight: 400;
			font-size: 51rpx;
			text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
		}

		.check {
			position: absolute;
			right: 78rpx;
			top: 27rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			padding: 20rpx 50rpx;
		}
	}

	.users {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
		padding: 20rpx 50rpx;
		height: 50vh;

		.user {
			width: 100%;
			height: 380rpx;
			border-radius: 50rpx;
			border: 1rpx solid #404c4c;
			position: relative;
			background-size: cover;

			.text {
				position: absolute;
				width: 100%;
				bottom: 0rpx;
				padding: 40rpx;
				// 底部渐变阴影
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);

				.footer {
					display: flex;
					justify-content: space-between;

					.state {
						width: 100rpx;
						height: 45rpx;
						border-radius: 14rpx;
						background: #ee9c43;
						display: flex;
						align-items: center;
						justify-content: center;

						text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #fff;
							display: flex;
						}
					}
				}

				.base {
					margin-bottom: 15rpx;
					display: flex;
					justify-content: space-between;
				}

				.name {
					color: #fff;
					font-size: 45rpx;
					font-weight: bolder;
				}

				.sex {
					image {
						width: 40rpx;
					}
				}
			}
		}
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}
</style>